<template>
    <div class="message-container">
      <!-- 顶部导航栏 -->
      <div class="nav-header">
        <div class="back-icon" @click="router.back()">←</div>
        <h2>消息通知</h2>
      </div>
  
      <!-- 消息类型切换 -->
      <div class="message-tabs">
        <div
          v-for="tab in tabs"
          :key="tab.type"
          class="tab-item"
          :class="{ active: currentTab === tab.type }"
          @click="currentTab = tab.type"
        >
          {{ tab.name }}
          <span v-if="tab.unread" class="unread-badge">{{ tab.unread }}</span>
        </div>
      </div>
  
      <!-- 消息列表 -->
      <div class="message-list" v-if="messages.length > 0">
        <div
          v-for="message in filteredMessages"
          :key="message.id"
          class="message-item"
          :class="{ unread: !message.isRead }"
          @click="readMessage(message)"
        >
          <div class="message-icon" :class="message.type">
            {{ getMessageIcon(message.type) }}
          </div>
          <div class="message-content">
            <div class="message-header">
              <span class="message-title">{{ message.title }}</span>
              <span class="message-time">{{ message.time }}</span>
            </div>
            <div class="message-text">{{ message.content }}</div>
          </div>
        </div>
      </div>
  
      <!-- 空状态 -->
      <div v-else class="empty-state">
        <p>暂无消息</p>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  
  const router = useRouter()
  
  // 消息类型标签
  const tabs = ref([
    { type: 'system', name: '系统通知', unread: 0 },
    { type: 'activity', name: '活动消息', unread: 0 },
    { type: 'order', name: '订单消息', unread: 0 }
  ])
  
  const currentTab = ref('system')
  const messages = ref([])
  
  // 获取消息列表数据
  const fetchMessages = async () => {
    try {
      const response = await axios.post('http://localhost:3005/message/')
      if (response.data.success === "成功") {
        messages.value = response.data.result.map((msg: any) => ({
          ...msg,
          isRead: false // 默认设置为未读
        }))
        // 更新未读消息数量
        updateUnreadCounts()
      } else {
        console.error('获取消息列表失败:', response.data.msg)
      }
    } catch (error) {
      console.error('获取消息列表失败:', error)
    }
  }
  
  // 更新未读消息数量
  const updateUnreadCounts = () => {
    const unreadCounts = {
      system: 0,
      activity: 0,
      order: 0
    }
    
    messages.value.forEach(msg => {
      if (!msg.isRead && unreadCounts[msg.type] !== undefined) {
        unreadCounts[msg.type]++
      }
    })
    
    tabs.value.forEach(tab => {
      tab.unread = unreadCounts[tab.type]
    })
  }
  
  // 根据当前选中的标签筛选消息
  const filteredMessages = computed(() => {
    return messages.value.filter(message => message.type === currentTab.value)
  })
  
  // 获取消息图标
  const getMessageIcon = (type: string) => {
    const icons = {
      system: '🔔',
      activity: '🎉',
      order: '🛍️'
    }
    return icons[type as keyof typeof icons] || '📩'
  }
  
  // 标记消息为已读
  const readMessage = (message: any) => {
    message.isRead = true
    // 更新未读数量
    const tab = tabs.value.find(tab => tab.type === message.type)
    if (tab && tab.unread > 0) {
      tab.unread--
    }
  }

  // 组件挂载时获取数据
  onMounted(() => {
    fetchMessages()
  })
  </script>
  
  <style scoped>
  .message-container {
    width: 100%;
    min-height: 100%;
    background-color: #f7f8fa;
    padding-bottom: 20px;
  }
  
  .nav-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    color: white;
    height: 50px;
  }
  
  .back-icon {
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    margin-right: 16px;
  }
  
  .back-icon:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .nav-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }
  
  .message-tabs {
    display: flex;
    justify-content: space-around;
    background: white;
    padding: 12px 0;
    margin-top: 50px;
    position: sticky;
    top: 50px;
    z-index: 99;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
  
  .tab-item {
    position: relative;
    padding: 8px 16px;
    font-size: 14px;
    margin-top: 40px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 16px;
  }
  
  .tab-item.active {
    
    color: #42b883;
    background: rgba(66, 184, 131, 0.1);
    font-weight: 500;
  }
  
  .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4d4f;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
  }
  
  .message-list {
    /* padding-top:80px; */
    padding: 10px;
    padding-bottom: 16px;
  }
  
  .message-item {
    display: flex;
    align-items: flex-start;
    /* padding: 16px; */
    /* padding: 0px 16px 0px 16px; */
    width: 400px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100px;
    box-sizing: border-box;
  }
  
  .message-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .message-item.unread {
    background: #f0f9f4;
  }
  
  .message-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .message-icon.system,
  .message-icon.activity,
  .message-icon.order {
    background: #e6f7ff;
  }
  
  .message-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  
  .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .message-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .message-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
  }
  
  .message-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
    height: 421px;
  }
  
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
  }
  
  .empty-state::before {
    content: "📭";
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .message-container {
    animation: fadeIn 0.3s ease-in-out;
  }
  </style>